<template>
  <div id="app">
    <transition
      :enter-active-class="transitionName"
      :leave-active-class="transitionName"
      >
      <!-- 数据缓存 -->
        <router-view v-if="isRouterAlive"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name:"app",
  provide(){
    return{
      reload:this.reload
    }
  },
  data(){
    return{
      isRouterAlive:true,
      transitionName:""
    }
  },
  methods:{
    reload(){
      this.isRouterAlive =false;
      this.$nextTick(function () {  
        this.isRouterAlive=true;
      })
    }
  },
  // watch:{ //侦听路由变化
  //   $route(to,from){
  //     if(from.path=="/home/mine" && to.path=="/myCollection"){
  //         this.transitionName ="animate__animated animate__slideInRight"
  //     }else if(to.path=="/home/mine" && from.path=="/myCollection"){
  //       this.transitionName ="animate__animated animate__slideInLeft"
  //     }
  //     else{
  //       this.transitionName=""
  //     }
  //   }
  // },
  
}
</script>

<style lang="scss">
$maxWidth:645px;
body{
  margin: 0;
  max-width: $maxWidth;
}
h1,h2,h3,h4,h5,h6,p{
  margin: 0;
}
ul,ol{
  margin: 0;
  padding: 0;
  list-style: none;
}
a,a:hover{
  color: #000;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
</style>
